<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="banner-img">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image src="https://s1.ax1x.com/2022/12/26/zx60Re.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://s1.ax1x.com/2022/12/26/zx60Re.jpg"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="banner-text">
			<text class="tit">美食沙龙(会展城店)</text>
			<text class="addr">贵阳观山湖长岭北路国际会议展览中心x区3楼负1层4号</text>
			<text class="phone">联系电话：15088886666</text>
			<view class="icon">
				<image src="/static/icon/index/dingwei.png"></image>
				<image src="/static/icon/index/dianhua.png"></image>
			</view>
		</view>
		<view class="data-time">
			<picker mode="date" :value="data.date" @change="bindDateChange">
				<view class="uni-input">日期：{{data.date}}</view>
			</picker>
			<image src="/static/icon/mine/gd.png"></image>
		</view>
		<view class="data-time">
			<picker mode="time" start="17:00" end="21:00" :value="data.time" @change="bindTimeChange">
				<view class="uni-input">时间：{{data.time}}</view>
			</picker>
			<image src="/static/icon/mine/gd.png"></image>
		</view>
		<view class="tabs">
			<view :class="['item',data.index==0?'item-tag':'']" @click="chooseTab(0)">
				<text>包房</text>
			</view>
			<view :class="['item',data.index==1?'item-tag':'']" @click="chooseTab(1)">
				<text>大厅</text>
			</view>
		</view>
		<!-- 包房 -->
		<view :class="[data.index==0?'main-item':'']" v-show="data.index==0">
			<view class="coupe-items">
				<view class="coupe-item">
					<image src="https://s1.ax1x.com/2023/01/05/pSkWnTf.jpg"></image>
					<view class="item-right">
						<text class="tit">云蒸</text>
						<image src="/static/icon/index/tingche.png"></image>
						<text>免费停车</text>
						<image src="/static/icon/index/wifi.png"></image>
						<text>免费wifi</text>
					</view>
					<view class="bottom-tag">
						<text>8人/桌</text>
					</view>
					<view class="reserve-box" @click="isFood(0,'https://s1.ax1x.com/2023/01/05/pSkWnTf.jpg')">
						<view class="reserve-box-top">
							<text>预定</text>
						</view>
						<view class="reserve-box-bottom">
							<text>在线付</text>
						</view>
					</view>
				</view>
				<view class="coupe-item">
					<image src="https://s1.ax1x.com/2023/01/05/pSkWemt.jpg"></image>
					<view class="item-right">
						<text class="tit">霞蔚</text>
						<image src="/static/icon/index/tingche.png"></image>
						<text>免费停车</text>
						<image src="/static/icon/index/wifi.png"></image>
						<text>免费wifi</text>
					</view>
					<view class="bottom-tag">
						<text>10人/桌</text>
					</view>
					<view class="reserve-box" @click="isFood(1,'https://s1.ax1x.com/2023/01/05/pSkWemt.jpg')">
						<view class="reserve-box-top">
							<text>预定</text>
						</view>
						<view class="reserve-box-bottom">
							<text>在线付</text>
						</view>
					</view>
				</view>
				<view class="coupe-item">
					<image src="https://s1.ax1x.com/2023/01/05/pSkWm0P.jpg"></image>
					<view class="item-right">
						<text class="tit">茗香</text>
						<image src="/static/icon/index/tingche.png"></image>
						<text>免费停车</text>
						<image src="/static/icon/index/wifi.png"></image>
						<text>免费wifi</text>
					</view>
					<view class="bottom-tag">
						<text>12人/桌</text>
					</view>
					<view class="reserve-box" @click="isFood(2,'https://s1.ax1x.com/2023/01/05/pSkWm0P.jpg')">
						<view class="reserve-box-top">
							<text>预定</text>
						</view>
						<view class="reserve-box-bottom">
							<text>在线付</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 大厅 -->
		<view :class="[data.index==1?'main-item':'']" v-show="data.index==1">
			<view class="hall-items">
				<view class="hall-item">
					<image></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	const data = reactive({
		date: '2021年',
		time: '17:00',
		index: 0
	})
	// 日期选择器
	const bindDateChange = (e) => {
		data.date = e.detail.value;
	}
	// 时间选择器
	const bindTimeChange = (e) => {
		data.time = e.detail.value;
	}

	//默认当前时间
	const date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;
	data.date = `${year}-${month}-${day}`;

	// 根据时间查询包房是否被预定
	const searchCoupe = () => {

	}

	const chooseTab = (index) => {
		data.index = index;
	}

	// 是否点菜
	const isFood = (i, src) => {
		console.log(i);
		uni.showModal({
			title: '是否点菜',
			content: '到店点菜还是现在点菜',
			cancelText: '到店点菜',
			confirmText: '现在点菜',
			success: (res) => {
				// 现在点菜
				if (res.confirm) {
					uni.navigateTo({
						url: '/pages/tabbar/index/foodList'
					})
				} else if (res.cancel) { // 到店点菜
					uni.navigateTo({
						url: '/pages/tabbar/index/coupePay?key=' + encodeURIComponent(JSON
							.stringify({
								i: i,
								date: data.date,
								tiem: data.time,
								src: src
							})),
					})
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	// $boxBorder:solid 1px rgb(112, 112, 112, 0.2);

	.content {
		padding: 10rpx;
		background-color: #fdf4ed;
		height: calc(100vh);

		.main-item {

			// display: grid;
			// grid-template-rows: 1fr;
			.coupe-items,
			.hall-items {
				width: 100%;
				background-color: #fff;

				.coupe-item {
					width: 100%;
					height: 220rpx;
					border-bottom: $boxBorder;
					display: flex;
					place-items: center;
					position: relative;
					place-content: space-between;

					.item-right {
						// margin-left: 10rpx;
						// background-color: #fbd561;
						width: 250rpx;
						height: 200rpx;
						display: grid;
						grid-template-rows: repeat(3, 1fr);
						grid-template-columns: 50rpx 1fr;

						.tit {
							font-size: larger;
							font-weight: bold;
							grid-column: 1/span 2;
							margin-left: 10rpx;
						}

						image {
							width: 25rpx;
							height: 25rpx;
							place-self: center;
						}

						text {
							font-size: small;
							place-self: center start;
						}
					}

					.reserve-box {
						width: 120rpx;
						height: 120rpx;

						margin-right: 20rpx;

						.reserve-box-top {
							width: 120rpx;
							height: 60rpx;
							background-color: #ff0000;
							text-align: center;
							line-height: 60rpx;

							text {
								font-size: larger;
								font-weight: bolder;
								color: #fff;
							}
						}

						.reserve-box-bottom {
							width: 116rpx;
							height: 58rpx;
							line-height: 58rpx;
							text-align: center;
							border: solid 1rpx #ff0000;

							text {
								color: #ff0000;
								font-weight: bold;
							}
						}
					}

					image {
						width: 300rpx;
						height: 200rpx;
						margin-left: 20rpx;
					}

					.bottom-tag {
						width: 300rpx;
						height: 50rpx;
						background-color: rgb(251, 213, 97, 0.8);
						position: absolute;
						bottom: 10rpx;
						left: 20rpx;
						text-align: center;
						line-height: 50rpx;

						text {
							color: #fff;
							font-weight: bold;
						}
					}
				}
			}

		}

		.tabs {
			display: flex;
			margin-top: 10rpx;
			width: 100%;
			height: 60rpx;
			background-color: #fff;
			place-items: center;
			border-bottom: $boxBorder;

			.item {
				width: 100rpx;
				height: 57rpx;
				text-align: center;
				line-height: 55rpx;
			}

			.item-tag {
				border-bottom: solid 3px #fbd561;
			}
		}

		.data-time {
			margin-top: 3rpx;
			width: 100%;
			height: 50rpx;
			background-color: #fff;
			border-bottom: $boxBorder;
			display: flex;
			place-items: center;

			picker {
				width: 92%;
				padding-left: 10rpx;
			}

			image {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.banner-text {
			width: 100%;
			height: 130rpx;
			background-color: #fff;
			border-bottom: $boxBorder;
			display: grid;
			padding-bottom: 10rpx;
			// padding-left: 10rpx;
			grid-template-columns: 85% 15%;
			grid-template-rows: repeat(3, 1fr);
			place-items: center start;

			text {
				font-size: smaller;
				padding-left: 10rpx;
			}

			.tit {
				padding-top: 5rpx;
				font-size: larger;
				grid-column: 1/sapn 2;
			}

			.addr {
				grid-column: 1/sapn 2;
			}

			.icon {
				width: 100%;
				display: flex;
				place-content: space-evenly;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.banner-img {

			.swiper {
				width: 100%;
				height: 300rpx;

				.swiper-item {
					display: block;
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;
					border-radius: 10rpx;

					image {
						width: 100%;
						height: 300rpx;
					}
				}
			}
		}
	}
</style>
